<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      stripe
      @selection-change="Alldele"
    >
      <!-- <el-table-column v-if="tableConfig.selection" type="selection" width="55"> -->
        <el-table-column
      type="selection"
      width="55">
      </el-table-column>
      <el-table-column
        v-for="item in tableColumns"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
      >
        <template v-slot="scope" v-if="item.prop === 'state'">
          <span>{{ scope.row.state === 1 ? "未缴费" : "已缴费" }} </span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="260">
        <template slot-scope="scope">
          <el-button type="success" size="small" @click="fn(scope.row)"
            >详情</el-button
          >
          <el-button v-if="tableConfig.editButton" type="primary" size="small" @click="updata(scope.row)"
            >修改</el-button
          >
          <el-button
            v-if="tableConfig.delButton"
            type="danger"
            size="small"
            @click="dele(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="tableConfig.isPagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableConfig.total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'CommonV',
  data () {
    return {
      currentPage: 1
    }
  },
  methods: {
    // 点击修改按钮
    updata (data) {
      // console.log(data)
      // 字组件向父组件传递数据   子组件传给父组件，父组件再传给弹窗
      this.$emit('updata', 'deit', data)
    },

    // 获取选中的所有id
    Alldele (val) {
      const arr = val.map(item => {
        return item.id
      })
      // 子组件向父组件传递数据
      this.$emit('Alldele', arr)
    },
    // 点击单个删除
    dele (id) {
      // 子组件向父组件传递数据
      this.$emit('dele', id)
    },
    // 当每页显示多少数据的时候触发的函数
    handleSizeChange (val) {
      // 子向父组件传递数据
      console.log(`每页 ${val} 条`)
      this.$emit('SizeChange', val)
    },
    // 当点击下一页的时候触发的函数
    handleCurrentChange (val) {
      // 子向父组件传递数据
      console.log(`当前页: ${val}`)
      this.$emit('CurrentChange', val)
    }
  },
  props: {
    // 数据
    tableData: {
      type: Array,
      default: () => {}
    },
    // 列（循环列）
    tableColumns: {
      type: Array,
      default: () => []
    },
    // 显示隐藏
    tableConfig: {
      type: Object,
      default: () => {}
    }
  }
}
</script>

<style lang="less" scoped></style>
